<template>
    <f7-page class="page-contact-list">
        <f7-navbar>
            <f7-nav-center>通讯录</f7-nav-center>
        </f7-navbar>
        <div class="main">
            <f7-searchbar cancel-link="取消" placeholder="搜索" :clear-button="true"></f7-searchbar>
            <f7-list class="circle-list-wrap">
                <f7-list-group class="">
                    <f7-list-item title="圈子" group-title></f7-list-item>
                    <f7-list-item>
                        <ul class="circle-list">
                            <li>
                                <f7-link icon-fa="circle-o-notch" href="/contactList/circleDetail/">朋友</f7-link>
                            </li>
                            <li>
                                <f7-link icon-fa="circle-o-notch" href="/contactList/circleDetail/">家人</f7-link>
                            </li>
                            <li>
                                <f7-link icon-fa="circle-o-notch" href="/contactList/circleDetail/">高中圈</f7-link>
                            </li>
                            <li>
                                <f7-link icon-fa="plus-circle" @click="addCircle">创建圈子</f7-link>
                            </li>
                        </ul>
                    </f7-list-item>
                    <f7-list-item link="/contactList/followedList/" title="关注的人" media="<i class='icon fa fa-user'></i>"></f7-list-item>
                </f7-list-group>
            </f7-list>
            <f7-list media-list class="contact-list">
                <f7-list-group>
                    <f7-list-item title="通讯录" group-title></f7-list-item>
                    <f7-list-item title="王老四" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                    <f7-list-item title="王老五" subtitle="一部一步的网上怕啊" :media="mediaTpl"></f7-list-item>
                </f7-list-group>
            </f7-list>
        </div>

        <div class="alpha-list">
            <ul>
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
                <li>G</li>
                <li>H</li>
                <li>I</li>
                <li>J</li>
                <li>K</li>
                <li>L</li>
                <li>M</li>
                <li>N</li>
                <li>O</li>
                <li>P</li>
                <li>Q</li>
                <li>R</li>
                <li>S</li>
                <li>T</li>
                <li>U</li>
                <li>V</li>
                <li>W</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
            </ul>
        </div>

        <main-toolbar></main-toolbar>
    </f7-page>
</template>

<style lang="scss">
@import "../../assets/css/common.scss";
.page-contact-list {
  .list-block {
    margin: 0;
  }

  .circle-list-wrap {
    margin-bottom: 5px;
  }

  .circle-list {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;

    li {
      display: inline-block;
      width: 60px;
      margin: 5px;
      font-size: 14px;
      text-align: center;

      &:last-child {
        .icon {
          font-size: 50px;
        }
      }
    }

    .icon {
      display: block;
      font-size: 50px;
    }
  }
}
</style>
<script>
import mainToolbar from "../components/mainToolbar.vue";
export default {
    data() {
        return {
            mediaTpl: '<div class="avatar">\
                        <img src="static/img/test.e6f2beb.jpg">\
                      </div>'
        }
    },
    components: {
        mainToolbar
    },
    methods: {
        /* 添加圈子 */
        addCircle() {
            this.$f7.prompt('', '创建圈子', () => {
                this.$router.load({
                    url: '/contactList/circleDetail/#edit'
                })
            })
        }
    }
};
</script>
